﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>YUI Editor</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- Skin CSS file -->
	<link rel="stylesheet" type="text/css" href="../yui/build/assets/skins/sam/skin.css">
	<!-- Utility Dependencies -->
	<script type="text/javascript" src="../yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
	<script type="text/javascript" src="../yui/build/element/element-beta-min.js"></script> 
	<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
	<script src="../yui/build/container/container_core-min.js"></script>
	<script src="../yui/build/menu/menu-min.js"></script>
	<script src="../yui/build/button/button-beta-min.js"></script>
	<!-- Source file for Rich Text Editor-->
	<script src="../yui/build/editor/editor-beta-min.js"></script>
	<style>
    .yui-skin-sam .yui-toolbar-container .yui-toolbar-mybutton1 span.yui-toolbar-icon {
        background-image: url( "chrome://linkxd/skin/unxd.png" );
        background-position: 1px 0px;
        left: 5px;
    }
	.yui-skin-sam .yui-toolbar-container .yui-toolbar-mybutton2 span.yui-toolbar-icon {
        background-image: url( "chrome://linkxd/skin/xd.png" );
        background-position: 1px 0px;
        left: 5px;
    }

</style>
</head>
<body class="yui-skin-sam">
<textarea name="msgpost" id="msgpost" cols="50" rows="10">
    This text will be pre-loaded in the editor when it is rendered.
</textarea>
<script>
var myEditor = new YAHOO.widget.Editor('msgpost', {
    height: '500px',
    width: '600px',
    dompath: true,
    animate: true,
	focusAtStart: true ,
    toolbar: {
        titlebar: 'LinkXD Editor',
        buttons: [
            { group: 'toolstyle', label: 'ToolBar',
                buttons: [
           			{ type: 'push', label: 'Bold', value: 'bold' },
               		{ type: 'push', label: 'Italic', value: 'italic' },
                 	{ type: 'push', label: 'Underline', value: 'underline' },
                   	{ type: 'separator' },
					{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
					{ type: 'push', label: 'Insert Image', value: 'insertimage' },
					{ type: 'push', label: 'linkCut', value: 'linkxdCut' },
					{ type: 'push', label: 'B1', value: 'mybutton1' },
					{ type: 'push', label: 'B2', value: 'mybutton2' }
                ]
            }
        ]
    }
});

myEditor.on('toolbarLoaded', function() {
	
    //Using the Dynamic Event cmdClick where cmd is the value of the button above
    this.toolbar.on('mybutton1Click', function(o) {
        alert('mybutton1 was clicked');
    });
    
    this.toolbar.on('mybutton2Click', function(o) {
		var text =  '<p><a href="http://linkxd.com/">快樂是我們連結的理由</a><img style="border:0;vertical-align:middle;" src="http://linkxd.com/images/linkxd.png"/></p>';
		this.execCommand('inserthtml',text);
		var oClipBoard = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
		oClipBoard.copyString(text);
    },myEditor, true);
	
}, myEditor, true);

myEditor.render();
                
</script>
</body>
</html>
